<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">


    <div class="demo-input-size">
        <el-input size="medium" placeholder="请输入角色名称" style="display: inline-block;width: 200px;"
                  v-model="searchInfo.rname">
        </el-input>


        <el-button type="primary" @click="Inquire()">查询信息</el-button>
        <!--<el-button type="success" @click="Addto()">添加信息</el-button>-->
        <el-button type="warning" plain @click="exportManage()">导出信息</el-button>
        <!--<a href="/ssm/manage/temp.xlsx">下载模板</a>-->
        <!--<form id="manageForm">-->
            <!--<input type="file" name="hehe">-->
        <!--</form>-->
        <!--<el-button type="danger" plain @click="importManage()" disabled>导入信息</el-button>-->

        <el-table :data="manageArr" border style="width: 100%">
            <el-table-column prop="id" label="角色编号">
            </el-table-column>
            <el-table-column prop="rname" label="角色名称">
            </el-table-column>
            <el-table-column prop="state" label="角色状态" align="center">
                <template slot-scope="scope">
             <span v-if="scope.row.state== 1">
                 <div class="state-icon icon1"></div>禁用
             </span>
                    <span v-if="scope.row.state== 0">
                 <div class="state-icon icon0"></div>启动
             </span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                     <span v-if="scope.row.id !=1">
                    <el-button type="warning" @click="getManage(scope.row.id)">修改</el-button>
                    <el-button type="danger" @click="deleteManage(scope.row.id)" disabled>删除</el-button>
                         </span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCount">
        </el-pagination>


        <el-dialog title="添加操作" :visible.sync="dialogFormVisible">
            <el-form :model="manageone" :rules="rules" ref="manageone">
                <el-form-item label="角色名称" prop="rname">
                    <el-input v-model="manageone.rname"></el-input>
                </el-form-item>
                <el-form-item label="角色状态" prop="state">
                    <el-select v-model="manageone.state" placeholder="请选择角色状态">
                        <el-option label="0:启动" value="0"></el-option>
                        <el-option label="1:禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="block">
                <span class="demonstration">角色权限</span>
                <el-cascader
                        :options="options"
                        :props="props"
                        collapse-tags
                        clearable></el-cascader>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addManage()">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="修改操作" :visible.sync="updialogFormVisible">
            <el-form :model="manageone" :rules="rules" ref="manageone">
                <el-form-item label="角色状态" prop="state">
                    <el-select v-model="manageone.state" placeholder="请选择角色状态">
                        <el-option label="0:启动" value="0"></el-option>
                        <el-option label="1:禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="block">
                <span class="demonstration">角色权限</span>
                <el-cascader
                        :options="options"
                        :props="props"
                        collapse-tags
                        clearable></el-cascader>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="reviseManage()">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</div>
<script>

    var haha = new Vue({
        el: "#app",
        data: {
            props: {multiple: true},
            options: [{
                value: 'gerenzhongxin',
                label: '个人中心',
                children: [{
                    value: 'shejiyuanze',
                    label: '账户注销',
                }, {
                    value: 'wodejianli',
                    label: '我的简历',
                }, {
                    value: 'xiugaimima',
                    label: '修改密码',
                }, {
                    value: 'tianjiazhuanghu',
                    label: '添加账户',
                }]
            },
                {
                    value: 'yihurenyuanguanli',
                    label: '医护人员管理',
                    children: [{
                        value: 'yihurenyuan',
                        label: '医护人员',

                    }, {
                        value: 'paibanguanli',
                        label: '排班管理',

                    }, {
                        value: 'tianjiayisheng',
                        label: '添加医生',
                    }, {
                        value: 'yuyueguahao',
                        label: '预约挂号',

                    }]
                },
                {
                    value: 'bumenguanli',
                    label: '部门管理',
                    children: [{
                        value: 'bumenzhanshi',
                        label: '部门展示'
                    }]
                },
                {
                    value: 'keshiguanli',
                    label: '科室管理',
                    children: [{
                        value: 'kehsizhanshi',
                        label: '科室展示'
                    }]
                },
                {
                    value: 'yuyueguanli',
                    label: '预约管理',
                    children: [{
                        value: 'bingrenyuyue',
                        label: '病人预约'
                    }, {
                        value: 'yiyuyuehuanzhe',
                        label: '已预约患者'
                    }, {
                        value: 'yuyuewancheng',
                        label: '预约完成'
                    }]
                },
                {
                    value: 'xinwenguanli',
                    label: '新闻管理',
                    children: [{
                        value: 'shenhexinwen',
                        label: '审核新闻'
                    }, {
                        value: 'fabuzhuangtai',
                        label: '发布状态'
                    }, {
                        value: 'chakanxinwen',
                        label: '查看新闻'
                    }, {
                        value: 'tianjiaxinwen',
                        label: '添加新闻'
                    }, {
                        value: 'xinwenleixing',
                        label: '新闻类型'
                    }]
                },
                {
                    value: 'rzhi',
                    label: '日志',
                    children: [{
                        value: 'caozourzhi',
                        label: '操作日志'
                    }]
                },
                {
                    value: 'zhichengguanli',
                    label: '职称管理',
                    children: [{
                        value: 'guanlizhicheng',
                        label: '管理职称'
                    }]
                },
                {
                    value: 'guanlijuese',
                    label: '管理角色',
                    children: [{
                        value: 'jueseguabli',
                        label: '角色管理'
                    }]
                },
                {
                    value: 'caidanguanli',
                    label: '菜单管理',
                    children: [{
                        value: 'guanlicaidan',
                        label: '管理菜单'
                    }]
                }],
            searchInfo: {},
            manageArr: [],
            totalCount: 0,
            dialogFormVisible: false,
            updialogFormVisible: false,
            manageone: {},
            rules: {
                rname: [{
                    required: true,
                    message: '请输入角色名称',
                    trigger: 'blur'
                },

                ],
                state: [{
                    required: true,
                    message: '请输入角色状态',
                    trigger: 'blur'
                },

                ],
                character: [{
                    required: true,
                    message: '请输入权限字符',
                    trigger: 'blur'
                },

                ],
            }
        },
        methods: {
            importManage() {
                //1 文件流读取
                var manageData = new FormData(manageForm);

                // 2 发送到后台
                $.ajax({
                    url: "/ssm/managesource/uploadExcel",
                    type: "POST",
                    data: manageData,
                    processData: false,
                    contentType: false,
                    success: function (backData) {
                    }
                });

            },
            exportManage() {
                window.location.href = "/ssm/managesource/download?name=" + haha.searchInfo.rname + "&character=" + haha.searchInfo.character + "&pageNo=1&pageCount=100";
            },
            reviseManage() {
                $.post("/ssm/manage/update", haha.manageone, function (backData) {
                    if (backData.code == 1) {
                        haha.updialogFormVisible = false;
                        haha.$refs["manageone"].resetFields();
                        haha.$message.success('恭喜你修改成功');
                        getDate(1, 10)
                    } else {
                        haha.$message.error('错了哦，这是一条错误消息');
                    }
                });
            },
            getManage(id) {
                $.get("/ssm/manage/get/" + id, function (backData) {
                    haha.manageone = backData.data;
                    haha.updialogFormVisible = true;
                })
            },
            deleteManage(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/manage/delete/" + id, function (backData) {
                        haha.$message.success(backData.msg);
                        getDate(1, 10)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addManage() {
                haha.$refs["manageone"].validate((valid) => {
                    if (valid) {
                        $.post("/ssm/manage/add", haha.manageone, function (backData) {
                            if (backData.code == 1) {
                                haha.dialogFormVisible = false;
                                haha.$refs["manageone"].resetFields();
                                haha.$message.success('恭喜你添加成功');
                                getDate(1, 10)
                            } else {
                                haha.$message.error('错了哦，这是一条错误消息');
                            }
                        });
                    }
                });
            },
            Addto() {
                haha.dialogFormVisible = true;
            },

            Inquire() {
                getDate(1, 10);
            },
            handleCurrentChange(val) {
                getDate(val, 10);
            }
        }
    });

    function getDate(a, b) {
        haha.searchInfo.pageNo = a;
        haha.searchInfo.pageCount = b;
        $.post("/ssm/manage/query", haha.searchInfo, function (backData) {
            haha.manageArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        })
    }

    getDate(1, 10);
</script>
</body>
</html>
